<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

        <!-- 对于vue而言，如果你事件绑定的函数写了小括号，他就认为你想手动给这个事件传参 -->
        <button @click="fn1">点我啊 -- 不加小括号</button>
        <button @click="fn1('abc')">点我啊--加小括号</button>

        <!-- 如果加了小括号还想拿事件对象，就需要自己手动传递$event -->
        <!-- $event就代表事件对象 -->
        <button @click="fn2('abc', $event)">点我啊--自己传参，又想拿到事件对象</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                // 事件绑定的函数，默认有参数，这个参数就是事件对象
                fn1 (e) {
                    
                    console.log('123', e)
                },

                fn2 (p1, p2) {
                    
                    console.log(p1, p2) // abc 事件对象
                },
            }
        })
    </script>
</body>
</html>